<template>
	<view class="">
		<view class="charts-box">
			<qiun-data-charts type="rose" :chartData="chartData" :loadingType="2" :echartsApp="true" background="none" :ontap="false" :onmouse="false" />
		</view>
		<view style="padding: 50rpx;">
			<view class="ranking-lists-item gui-flex" v-for="(item, index) in rankingList" :key="index">
				<view class="ranking-lists-num gui-block-text" v-if='index==0' style="color:#FF0036">{{ index + 1 }}</view>
				<view class="ranking-lists-num gui-block-text" v-else-if='index==1' style="color:#FF9B00">{{ index + 1 }}</view>
				<view class="ranking-lists-num gui-block-text" v-else-if='index==2' style="color:#FFCC00">{{ index + 1 }}</view>
				<view class="ranking-lists-num gui-block-text" v-else>{{ index + 1 }}</view>
				<view class="ranking-lists-content">
					<text class="ranking-lists-content-name gui-block-text">{{ item.name }}</text>
				</view>
				<view class="ranking-lists-zan">
					<text class="ranking-lists-zan-num gui-block-text gui-color-gray">{{ item.num }}次</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import {isOpen,openSqlite,closedb,executeSql,selectSql,isTable} from '@/database.js'
export default {
	data() {
		return {
			rankingList: [],
			chartData: {
				series: [
					{
						format: 'lizhili',
						data: []
					}
				]
			}
		};
	},
	async onShow() {
		await openSqlite();
		let food=await selectSql('SELECT * FROM food ORDER BY num desc;')
		this.rankingList=food
		let num=0
		let arr=[]
		for (let i in food) {
			if(i<7){
				arr.push({
					name:food[i].name,
					value:food[i].num
				})
			}else{
				num+=food[i].num
			}
		}
		arr.push({
			name:'其他',
			value:num
		})
		this.chartData.series[0].data=arr
		
	}
};
</script>

<style>
.charts-box {
	width: 100%;
	height: 300px;
}
.ranking-lists{padding:25rpx;}
.ranking-lists-item{margin-bottom:28rpx; flex-direction:row; justify-content:space-between; flex-wrap:nowrap; align-items:center;}
.ranking-lists-num{width:60rpx; line-height:80rpx; font-size:50rpx; color:#666666; font-weight:bold; font-style:italic; text-align:center;}
.ranking-lists-content{width:200rpx; margin:0 30rpx; flex:1;}
.ranking-lists-content-name{font-size:35rpx; line-height:56rpx; color:#333333; line-height:50rpx;}
.ranking-lists-zan{width:80rpx;}
.ranking-lists-zan-num{font-size:30rpx; text-align:center;}
.zan-active{color:#FF0036;}
</style>
